<template>
	<u-popup :show="loginShow" @close="close" mode="center" :closeable="true">
		<view class="bg-white cont py-3 px-5">
			<view class="font-weight-bold font text-center">{{ popupTitle }}</view>
			<view class="flex justify-center align-center mt-1" :class="{ check: noAgreement }">
				<checkbox-group @change="agreement = !agreement"><checkbox value="协议" :checked="agreement" /></checkbox-group>
				<view class="c_9 font_24">
					<text>阅读并接受</text>
					<text class="agre_text">《索比用户协议》</text>
				</view>
			</view>
			<view class="login_logo flex justify-center mt-2"><image src="@/static/img2/login/logo.png" mode="aspectFill"></image></view>
			<!-- <view class="text-center"><text class="font_22 text-white rounded_15 px-2" style="background: #999;">请同意《索比用户协议》</text></view> -->
			<button v-if="!agreement" type="warn" class="my-2 h6 py-1 flex justify-center align-center bg_main" @click="loginChange">微信一键登录</button>
			<button
				v-else
				type="warn"
				class="my-2 h6 py-1 flex justify-center align-center bg_main"
				@getphonenumber="onGetPhoneNumber"
				open-type="getPhoneNumber"
				:disabled="wxload"
				:loading="wxload"
			>
				{{ wxload ? '登录中' : '微信一键登录' }}
			</button>
			<view class="font_24 c_6 py-2">
				<view class="">登录后您将获得以下权限:</view>
				<view class=" mt-1">
					<view class="flex">
						<u-icon name="checkmark-circle-fill" color="#CF1526" size="12"></u-icon>
						<text class="ml-1">加入圈内通讯录</text>
					</view>
					<view class="flex">
						<u-icon name="checkmark-circle-fill" color="#CF1526" size="12"></u-icon>
						<text class="ml-1">询价、交换名片等互动操作</text>
					</view>
					<view class="flex">
						<u-icon name="checkmark-circle-fill" color="#CF1526" size="12"></u-icon>
						<text class="ml-1">企业主页编辑管理</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	props: ['loginShow', 'popupTitle'],
	data() {
		return {
			agreement: false, //协议
			noAgreement: false,
			wxload: false //微信登录按钮loading
		};
	},
	computed: {
		opentype() {
			return function(val) {
				return this.agreement ? 'getPhoneNumber' : '';
			};
		}
	},
	created() {
		// console.log('loginPopup==>', this.loginShow);
	},
	methods: {
		close() {
			this.$emit('close', false);
		},
		loginChange() {
			this.noAgreement = !this.noAgreement;
			setTimeout(() => {
				this.noAgreement = false;
			}, 1000);
		},
		onGetPhoneNumber(e) {
			this.wxload = true;
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.getLogin(e.detail.code)
					.then(res => {
						uni.$u.toast('授权登录成功');
						this.$emit('close', false);
						this.$emit('loginSuccess')
					})
					.catch(err => {
						this.wxload = false;
						console.log('登录失败');
						uni.$u.toast('授权登录失败，请重试');
					});
			} else {
				this.wxload = false;
				uni.showToast({
					title: '授权失败,请重试',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.cont {
	width: 500rpx;
	padding-top: 50rpx !important;
}
.login_logo {
	image {
		width: 120rpx;
		height: 120rpx;
	}
}
::v-deep checkbox {
	transform: scale(0.6);
}
.check {
	animation: agreement 0.5s ease 0s 2;
	view {
		color: $color14 !important;
	}
}
@keyframes agreement {
	from {
		transform: scale(0.9);
	}
	to {
		transform: scale(1);
	}
}
</style>
